<template>
  <!-- 就诊人组件的静态结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="primary" :icon="User" size="default" @click="addUser">添加就诊人</el-button>
      </div>
    </template>
    <!-- 就诊人管理模块展示就诊人信息的结构 -->
    <div class="visitor" v-if="scene===0">
      <Visitor
        v-for="(user,index) in userArr"
        :key="user.id"
        class="item"
        :user="user"
        :index="index"
        @changeScene="changeScene"
      >
        <el-popconfirm :title="`确定删除${user.name}吗？`" width="200" @confirm="removeUser(user.id)">
          <template #reference>
            <el-button type="danger" size="default" circle :icon="Delete"></el-button>
          </template>
        </el-popconfirm>
      </Visitor>
    </div>
    <!-- 添加就诊人/修改就诊人信息 -->
    <div class="form" v-if="scene===1">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form label-width="auto">
        <el-form-item label="姓名">
          <el-input placeholder="请输入就诊人姓名" v-model="userParams.name" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" v-model="userParams.certificatesType">
            <el-option
              v-for="item in certationArr"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入就诊人的证件号码" v-model="userParams.certificatesNo" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userParams.sex">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            type="date"
            placeholder="请选择就诊人的出生日期"
            value-format="YYYY-MM-DD"
            v-model="userParams.birthdate"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入就诊人的手机号码" v-model="userParams.phone" />
        </el-form-item>
      </el-form>
      <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
      <el-form>
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :value="1">未婚</el-radio>
            <el-radio :value="0">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :value="1">自费</el-radio>
            <el-radio :value="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前地址">
          <el-cascader :props="props" v-model="userParams.addressSelected" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入就诊人的详细地址" v-model="userParams.address" />
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <el-form label-width="69">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入联系人的用户姓名" v-model="userParams.contactsName" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" v-model="userParams.contactsCertificatesType">
            <el-option
              v-for="item in certationArr"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入联系人的证件号码" v-model="userParams.contactsCertificatesNo" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入联系人的手机号码" v-model="userParams.contactsPhone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="submit">提交</el-button>
          <el-button type="primary" size="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
// @ts-ignore
import { onMounted, ref, reactive, watch } from "vue"
import { User,Delete } from "@element-plus/icons-vue";
// @ts-ignore
import { reqGetUser } from "@/api/hospital"
// @ts-ignore
import { reqCertationType, reqCity, reqAddOrUpdateUser, reqRemoveUser } from "@/api/user"
// @ts-ignore
import type { UserResponseData, UserArr } from "@/api/hospital/type"
// @ts-ignore
import type { CertationTypeResponseData, CertationArr, AddOrderUpdateUser } from "@/api/user/type"
// 级联选择器数据的ts类型
import type { CascaderProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute,useRouter } from "vue-router"
let route = useRoute()
let router = useRouter()
// 存储全部就诊人的信息
let userArr=ref<UserArr>([])
// 定义一个响应式数据：决定卡片身体部分展示的内容
let scene=ref<number>(0)
// 存储证件类型的数据
let certationArr=ref<CertationArr>([])
// 收集表单的数据
let userParams=reactive<AddOrderUpdateUser>({
  name: '',
  certificatesType: '',
  certificatesNo: '',
  sex: 0,
  birthdate: '',
  phone: '',
  isMarry: 0,
  isInsure: 0,
  addressSelected:[],
  address: '',
  contactsName: '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: ''
})
const getAllUser=async()=>{
  let result:UserResponseData=await reqGetUser()
  if(result.code==200){
    userArr.value=result.data
  }
}
// 清空重置
const reset=()=>{
  Object.assign(userParams,{
    id:'',
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected:[],
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: ''
    })
}
// 添加就诊人
const addUser=()=>{
  // 清空上一次的数据
  reset()
  scene.value=1
}
// 就诊人子组件自定义事件的回调
const changeScene=(user:AddOrderUpdateUser)=>{
  scene.value=1;
  // 收集已有的就诊人的信息  
  Object.assign(userParams,user)
}
// 获取证件类型的回调
const getCertationType=async()=>{
  let result:CertationTypeResponseData=await reqCertationType()
  if(result.code==200){
    certationArr.value=result.data
  }
}
onMounted(()=>{
  // 获取就诊人信息
  getAllUser()
  // 获取证件类型的数据
  getCertationType()
  // 判断：当前这个路由组件是否从挂号组件跳转来的
  if(route.query.type=='add'){
    scene.value=1
  }
  if(route.query.type=='edit'){
    scene.value=1
  }
})
// 级联选择器数据
const props:CascaderProps = {
  lazy: true,
  // 加载级联选择器数据的方法
 async lazyLoad(node:any, resolve:any) {
  let result:any=await reqCity(node.data.id as string||'86')
  let showData=result.data.map((item:any)=>{
    return{
      id:item.id,
      label:item.name,
      value:item.value,
      leaf: !item.hasChildren
    }
  })
  resolve(showData)
  },
}
// 提交按钮的方法回调
const submit=async()=>{
  try{
    // 新增/更新用户成功
    await reqAddOrUpdateUser(userParams)
    ElMessage({
      message: userParams.id?'更新成功！':'添加成功！',
      type: 'success',
    })
    // 切换场景为0
    if(route.query.type){
      router.back()
    }else{
      scene.value=0;
    }
    // 获取全部的就诊人的信息
    getAllUser()
  }catch(error){
    ElMessage({
      message: userParams.id?'更新失败！':'添加失败！',
      type: 'error',
    })
  }
}
// 监听全部就诊人的数据
watch(()=>userArr.value,()=>{
  if(route.query.type=='edit'){
    let user=userArr.value.find((item:any)=>{
      return item.id==route.query.id
    })
    Object.assign(userParams,user)
  }
})
// 删除就诊人
const removeUser=async(id:number)=>{
  try{
    // 删除用户成功
    await reqRemoveUser(id)
    getAllUser()
    ElMessage({
      message: '删除就诊人成功！',
      type: 'success'
    })
  }catch(error){
    ElMessage({
      message: '删除就诊人失败！',
      type: 'warning',
    })
  }
}
</script>
  
<style lang="scss" scoped>
.box-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .visitor {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 32%;
      margin: 10px 5px;
    }
  }
  .el-form {
    width: 600px;
    margin: 10px auto;
  }
}
</style>